﻿@{
    ViewBag.Title = "Pencas Blanqueada - Contacto";
}


    <div class="medium-10 large-9 large-offset-1 columns">
        
        <div class="row">
            <div class="small-12 small-offset-1 columns" style="margin-bottom: 20px; font-size: 22px">Contacto</div>
            <br/>
            <div class="small-10 small-offset-1 large-6 columns text-left" style="margin-top: 5px">
                Tu e-mail:
                <input id="emailField" type="text" name="mail"/>
            </div>
        </div>

        <div class="row">
            <div class="small-10 small-offset-1 large-6 columns" style="margin-top: 5px">
                Mensaje:
                @Html.TextArea("mensaje", new { style = "height:200px" })                
            </div>
        </div>

        <div class="row">
            <div class="small-2 small-offset-9 large-offset-5 columns text-right"><button id="buttonEnviar" type="button" class="btn btn-danger">Enviar</button></div>
            <div class="small-2 small-offset-9 large-offset-5 columns text-center"><img id="ajax-loader" src="Content/img/ajax-loader.gif" style="height: 16px; width: 16px; margin-top: 10px; display: none;"/></div>
            <div id="responseMsg" style="display:none; float: left; width: 50%; margin-left: 10%;">Mensaje de éxito</div>
        </div>
    </div>


@*<div style="margin-left:10%; margin-top:5px; width:8%; float:left">Tu e-mail:</div><div><input id="emailField" type="text" name="mail"/></div>
<br />
<div>@Html.TextArea("mensaje", new { style = "margin-left:10%; width:25.5%; height:200px" })</div>
<div style="width: 3%; float: left; margin-left: 33%; display: block;" id="jkl"><img id="ajax-loader" src="Content/img/ajax-loader.gif" style="height: 16px; width: 16px; margin-top: 10px; display: none;"></div>
<div style="margin-left:30.3%; float: left;"><button id="buttonEnviar" type="button" class="btn btn-danger" style="display: inline-block;">Enviar</button></div>
<div id="responseMsg" style="display:none; float: left; width: 50%; margin-left: 10%;">Mensaje de éxito</div>*@


<script type="text/javascript">
    $(document).ready(function () {
        $("#menu-bar li").removeClass("active");
        $(".liContacto").addClass("active");

        var email = '@Session["email"]';
        setEmail(email);
        $("#emailField").val(email);

        $("#buttonEnviar").click(function () {
            $.ajax({
                type: 'POST',
                url: "@Url.Action("EnviarMail", "Home")",
                data: {
                    mail: $("#emailField").val(),
                    mensaje: $("#mensaje").val()
                },
                beforeSend: function(){
                    $("#buttonEnviar").hide();
                    $("#ajax-loader").show();
                },
                success: function(){
                    $("#responseMsg").show();
                    $("#responseMsg").css("color", "green");
                    $("#responseMsg").text("Se ha enviado su mensaje. Responderemos a la brevedad");
                    $("#buttonEnviar").show();
                    $("#ajax-loader").hide();
                },
                error: function(){
                    $("#responseMsg").show();
                    $("#responseMsg").css("color", "red");
                    $("#responseMsg").text("Ocurrió un error inesperado. Intente nuevamente más tarde");
                    $("#buttonEnviar").show();
                    $("#ajax-loader").hide();
                }
            });
        });
    });
</script>